<template>
  <div id="main">
    <el-table
      :data="tableData"
      size="small"
      style="width: 100%">
      <el-table-column align="center" label="筛选条件">
        <el-table-column align="center" label="变量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.param" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关系">
          <template slot-scope="scope">
            <el-select filterable style="width: 100%" size="mini" v-model="scope.row.relation"
                       placeholder="请选择关系">
              <el-option
                v-for="item in relationOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="值">
          <template slot-scope="scope">
            <el-input v-model="scope.row.paramValue" size="mini"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="转向目标节点">
        <el-table-column align="center" label="节点名称">
          <template slot-scope="scope">
            <el-select filterable style="width: 100%" size="mini" v-model="scope.row.toComponentSeq"
                       placeholder="请选择节点">
              <el-option
                v-for="item in cmponentSeqOptions"
                :key="item.id"
                :label="item.store.data.attrs.label.text"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="描述">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" size="mini"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" style="margin-left: 10px" size="mini" @click="addHang()">增加
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="danger" style="margin-left: 10px" size="mini" @click="deleteRow(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css"; // 基本样式
import "codemirror/theme/ambiance.css"; // 主题1 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/theme/base16-light.css"; // 主题2
import "codemirror/theme/cobalt.css"; // 主题3
import "codemirror/mode/sql/sql.js";
import Crontab from "@/views/taskscheduler/components/crontab/index.vue";
//禁止缩放
export default {

  data() {
    return {
      tableData: [{
        param: "",
        relation: "",
        paramValue: "",
        toComponentSeq: "",
        remark: ""
      }],
      dataSourceOptions: [],
      fieldOption: [],
      cmponentSeqOptions:[],
      relationOptions: [
        {
          value: ">"
        },
        {
          value: ">="
        },
        {
          value: "="
        },
        {
          value: "!="
        },
        {
          value: "<"
        },
        {
          value: "<="
        },
        {
          value: "isNotNull"
        },
        {
          value: "isNotEmpty"
        },
        {
          value: "isNull"
        },
        {
          value: "isEmpty"
        }

      ],
      addform: {
        datasourceId: "",
        sqlText: "",
        dataAlias: ""
      },
      fromrules: {
        datasourceId: { required: true, message: "请选择", trigger: "change" },
        sqlText: { required: true, message: "请输入", trigger: "blur" }
      }
    };
  },
  methods: {
    getdata() {
      // console.log("data", this.form);
    },
    // getFormOption() {
    //   return this.$http.post("/offlineSync/findDatasource").then((res) => {
    //     this.dataSourceOptions = res.data;
    //   });
    // },
    invertData(data,nodes) {
      this.cmponentSeqOptions = nodes;
      if (!data) {
        this.restForm();
        return;
      }
      this.$nextTick(() => {
          this.tableData = data.routeList;
      });
      // Promise.all([this.getoComponentSeq(flowid)]).then((res) => {
      //
      // });
    },
    // getoComponentSeq(flowid){
    //   return  this.$http.post('/case/findNodes',{flowInfoId:flowid}).then((res)=>{
    //   this.cmponentSeqOptions = res.data
    //   })
    // },
    addHang() {
      this.tableData.push({ id: "" });
    },
    deleteRow(index, rows) {
      this.tableData.splice(index, 1);
    },
    renderHeader(h, { column, $index }) {
      const attrs = {
        props: {
          clickChangeColor: true,
          type: "primary",
          underline: true
        }
      };
      return h("el-link", attrs, column.label);
    },
    restForm() {
      this.tableData = [{
        srcColumnName: "",
        relation: "",
        srcColumnValue: "",
        columnAlias: "",
        valColumn: ""
      }];
    }

  },
  mounted() {
    // this.getFormOption();
  }
};
</script>
<style lang="scss" scoped>
::v-deep.code-mirror {
  .CodeMirror-line {
    font-size: 16px;
  }

  .CodeMirror-linenumber {
    font-size: 16px;
  }

  .cm-s-cobalt.CodeMirror {
    background-color: black;
  }
}
</style>
